<template>
    <div class="container">
        <br><br>
        <el-button type="primary" @click="handlerAdd">添加房间</el-button>
        <div class="user-table">
            <el-table :data="roomList" style="width: 100%">
            <el-table-column prop="roomId" label="房间号" width="80" />
            <el-table-column prop="roomType" label="房间类型" width="80" />
            <el-table-column prop="roomState" label="房间费用" />
            <el-table-column prop="price" label="房间状态" width="180" />
            <el-table-column  label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handlerEdit(scope.row)">
                      编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="deleteRoom(scope.row.roomId)" >
                    删除
                  </el-button>
                </template>
            </el-table-column>
            </el-table>
        </div>
       
  
      <!--用户编辑表格-->
        <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="500">

            <el-form
                ref="ruleFormRef"
                style="max-width: 600px"
                :model="user"
                label-width="auto"
                class="demo-ruleForm"
                :size="formSize"
                status-icon>
                <el-form-item label="房间号" prop="rid">
                    <el-input v-model="room.rid" />
                </el-form-item>
                <el-form-item label="房间类型" prop="rtype">
                    <el-input v-model="room.rtype" />
                </el-form-item>
                <el-form-item label="房间费用" prop="rcost">
                    <el-input v-model="room.rcost" />
                </el-form-item>
                <el-form-item label="房间状态" prop="rstate">
                    <el-input v-model="room.rstate" />
                </el-form-item>
            </el-form>
  
  
  
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveRoom">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
  
  
  <script setup>
  import { onMounted,ref } from "vue";
  import { ElMessage,ElMessageBox } from 'element-plus'
  
      const dialogTitle = ref('编辑用户')
  
      //用户编辑页面是否显示
      const dialogVisible = ref(false)
  
      //操作类型  add：添加； update:修改
      const optionType = ref('')
  
      const room = ref(
        {
            rid:"",
            rtype: "",
            rcost: "",
            rstate: ""
        },
    )
  
      const roomList = ref([]);
  
      //保存房间数据
      const saveRoom = () =>{
        let url=""
        let methodName=''
           if(optionType.value == 'add'){
            url = "http://localhost:8282/room/add?roomId="+room.value.rid+"&roomType="+room.value.rtype+"&roomState="+room.value.rstate+"&price="+room.value.rcost
            methodName = 'get'
           }else if(optionType.value == 'edit'){
            url = "http://localhost:8282/room/update?roomId="+room.value.rid+"&roomType="+room.value.rtype+"&roomState="+room.value.rstate+"&price="+room.value.rcost
            methodName = 'get'
           }
           console.log(url)
           fetch(url,{
                method:methodName,
                headers:{
                   "Authorization":localStorage.getItem("token")
               }
          })
               .then( res => res.json())
               .then( res => {
                   ElMessage({
                    message: '用户信息修改成功',
                    type: 'success',
                  })
                   dialogVisible.value = false ;
               })
      }
      //添加房间
    const handlerAdd = () =>{
        room.value = {}
        optionType.value = 'add'
        dialogTitle.value = '添加房间'
        dialogVisible.value = true ;
    }
  
  
      //编辑房间状态
      const handlerEdit = row =>{
          room.value = row
          optionType.value = 'edit'
          dialogTitle.value = '编辑房间'
          dialogVisible.value = true
      }
  
      //查询所有房间
      const selectAllRooms = () =>{
          fetch("http://localhost:8282/room/findAll",{
              method: 'GET',
              mode: 'cors',
              headers:{
                   "Authorization":localStorage.getItem("token")
               }
          })
               .then( res => res.json())
               .then( res => roomList.value = res.data)
      }

    //删除房间
    const deleteRoom = roomId =>{
  
  ElMessageBox.confirm(
   '用户删除后不能恢复，是否确认删除?',
   '删除用户',
   {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning',
   }
 )
   .then(() => {
      //单击了确认删除按钮
      handlerDel(roomId)
   })
   .catch(() => {
     ElMessage({
       type: 'info',
       message: '取消了操作',
     })
   })

}

const handlerDel = roomId =>{
    let url = "http://localhost:8282/room/delete?roomId="+roomId
    console.log(url)
    fetch(url,{
       method:'delete',
       headers:{
                   "Authorization":localStorage.getItem("token")
               }        
    })
      .then( res => res.json())
      .then( res => {
          ElMessage({
           message: '用户信息删除成功',
           type: 'success',
         })
          selectAllRooms();
      })
}

  
      //查询数据的函数
      onMounted(() => {
         selectAllRooms();
      })
  </script>
  <style scoped>
      .container{
        text-align: center;
      }
      
      table{
          border-collapse: collapse;
          border: 1px solid rgb(8, 8, 8);
          display: inline-block;
      }
  
      .user-table{
         width: 80%;
         margin: 0 auto;
      }
  
  </style>
  